<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
       #box{
       	width: 800px;
       	height: 150px;
       	border: 1px solid #ccc;
       	margin: 0 auto;
       }
       ul{

       }
       li{
       	list-style: none;
       	float: left;
       	position: relative;
       }
       img{
       	display: none;
       	position: absolute;
       	top: 0;
       	left: 0;
       }
       a{
       	display: block;
       	width: 121px;
       	height: 110px;
       	border: 1px solid #ccc;
        margin:10px;
        background: #999;
       }
	</style>

	<script type="text/javascript">
		 window.onload = function  () {
		 	var Oli = document.getElementsByTagName("li");
		 	var	Oimg = document.getElementsByTagName("img");
		 	for (var i = 0;i < Oli.length ; i++) {
		 		Oli[i].index = i;
		 		Oli[i].onmouseover = function () {
		 		
		 		    Oimg[this.index].style.display = "block"

		 		}
		 		Oli[i].onmouseout = function () {
		 		    
		 		    Oimg[this.index].style.display = "none"

		 		}
		    };
		} 	
	</script>		
</head>
<body>
	<div id="box">
		<ul>
		  <li>
		    <a href="#">宝马</a>
		    <img src="images/1.jpg">
		  </li>
		  <li>
		    <a href="#">兰博基尼</a>
		    <img src="images/2.jpg">
		  </li>
		  <li>
		    <a href="#">奔驰</a>
		    <img src="images/3.jpg">
		  </li>			
		  <li>
		    <a href="#">保时捷</a>
		    <img src="images/4.jpg">
		  </li>
		</ul>
	</div>
</body>
</html>	